<template>
  <!-- 封装弹框 -->
  <div class="popup">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="popupWidth"
      :before-close="handleClose"
    >
      <slot>
        <div v-for="item in dialogItem" :key="item.prop">
          <el-input
            v-if="item.type === 'Input'"
            v-model.trim="dialogData[item.prop]"
            :placeholder="item.placeholder"
            :style="{ width: item.width }"
            :disabled="item.disabled"
            @change="changeVal"
          ></el-input>
          <el-input
            type="textarea"
            :rows="2"
            v-if="item.type === 'textarea'"
            v-model.trim="dialogData[item.prop]"
            :placeholder="item.placeholder"
          >
          </el-input>
        </div>
      </slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: "标题",
      },
      visible: {
        type: Boolean,
        default: false,
      },
      popupWidth: {
        type: String,
        default: "550px",
      },
      dialogItem: {
        type: Array,
        default: () => [],
      },
      dialogData: {
        type: Object,
        default: () => {},
      },
    },
    computed: {
      dialogVisible: {
        get() {
          return this.visible
        },
        set(val) {
          // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
          this.$emit("updateVisible", val)
        },
      },
    },
    methods: {
      Cancel() {
        this.$emit("resetPopupData")
      },
      Save() {
        this.$emit("submitPopupData")
      },
      handleClose() {
        this.$emit("handleClose")
      },
      changeVal(val) {
        this.$emit("handlechangeVal", val)
      },
    },
    watch: {
      // 监听返回数据 加验证规则处理
      dialogItem: {
        handler(newValue) {
          console.log(newValue)
        },
        immediate: true,
      },
    },
  }
</script>
